<template>
  <div v-loading="tabLoading">
    <el-button type="primary" class="fr" @click="tab3CreateItem" v-permission="'materialInfo.add'">创建</el-button>
    <div class="filter-container">
      <el-select v-model="tab3QueryParams.custom_id" class="filter-item" filterable remote :remote-method="tab3Init"
        placeholder="请选择客户" clearable>
        <el-option v-for="i in tab3CustomOptions" :key="i.id" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-button class="filter-item" type="success" plain @click="tab3Research">查询</el-button>
    </div>
    <z-table :list="tab3List" :tableProps="tab3TableProps" :columns="tab3Columns" @editItem="tab3EditItem"
      @deleteItem="tab3DeleteItem"></z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="tab3QueryParams.page"
      :limit.sync="tab3QueryParams.size" @change="paginationschane"></z-pagination>
    <z-form-dialog :name="''" :data="tab3Data" :formProps="tab3FormProps" :fields="tab3Fields" @submit="tab3Submit"
      :submitLoading="submitLoading" :visible.sync="tab3EditFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: '',
  components: {},
  props: {},
  data() {
    return {
      tabLoading: false,
      submitLoading: false,
      tab3QueryParams: {
        page: 1,
        size: 10,
        material_id: null,
        custom_id: null,
      },
      total: 0,
      tab3CustomOptions: [],
      tab3List: [],
      tab3TableProps: {
        border: true,
        opsColWith: 80,
        hideOperations: true,
      },
      tab3Columns: [
        { title: '客户料号', key: 'cust_pn_code', width: 140 },
        { title: '客户料名', key: 'cust_pn_name', width: 140 },
        { title: '物料规格', key: 'cust_pn_specification', width: 160 },
        { title: '客户编码', key: 'cust_code', width: 140 },
        { title: '客户名称', key: 'cust_name', width: 140 },
        { title: '第三方料号', key: 'kpn_condition', width: 100 },
        { title: '属性1', key: 'property', width: 90 },
        { title: '属性2', key: 'property2', width: 90 },
        { title: '属性3', key: 'property3', width: 90 },
        { title: '版本', key: 'version', width: 90 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      tab3Data: {},
      tab3FormProps: {
        dialogWidth: '70%',
        labelWidth: '140px',
      },
      tab3Fields: [
        { title: '客户', key: 'cust_id', name: 'select', options: [] },
        { title: '客户料号', key: 'cust_pn_code', span: 12 },
        { title: '客户料名', key: 'cust_pn_name', span: 12 },
        { title: '物料规格', key: 'cust_pn_specification', span: 24 },
        { title: '第三方料号', key: 'kpn_condition', span: 12 },
        { title: '属性1', key: 'property', span: 12 },
        { title: '属性2', key: 'property2', span: 12 },
        { title: '属性3', key: 'property3', span: 12 },
        { title: '版本', key: 'version', span: 12 },
        { title: '备注', key: 'remarks', span: 24, name: 'textarea' },
      ],
      tab3EditFormVisible: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    tab3Init(val) {
      this.$request(this.$api.custom + 'getlist', { page: 1, size: 100, queryString: val ? val : '' }).then((r) => {
        this.tab3CustomOptions = r.list.map((i) => ({
          label: `${i.cust_code} ${i.cust_name}`,
          value: i.id,
        }))
        this.$parent.$parent.$parent.setArrayProps(this.tab3Fields, [
          {
            key: 'cust_id',
            options: this.tab3CustomOptions,
          },
        ])
      })
      this.tab3Research()
    },
    tab3Research() {
      this.tab3GetList()
    },
    paginationschane(val) {
      this.tab3QueryParams.size = val.limit
      this.tab3QueryParams.page = val.page
      this.tab3GetList()
    },
    tab3GetList() {
      if (!this.$parent.$parent.$parent.data.id) return
      this.tabLoading = true
      this.tab3QueryParams.material_id = this.$parent.$parent.$parent.data.id
      this.$request(this.$api.partmap + 'getlist', this.tab3QueryParams)
        .then((r) => {
          this.tabLoading = false
          this.tab3List = r.list
          this.total = r.total
        })
        .catch(() => {
          this.tabLoading = false
        })
    },
    tab3CreateItem() {
      this.tab3Data = { material_id: this.$parent.$parent.$parent.data.id }
      this.tab3EditFormVisible = true
    },
    tab3EditItem(v) {
      this.tab3Data = {}
      this.$parent.$parent.$parent.pageLoading = true
      this.$request(this.$api.partmap + 'getbyid', {
        id: v.id,
      })
        .then((r) => {
          this.$parent.$parent.$parent.pageLoading = false
          this.tab3Data = r
          this.tab3EditFormVisible = true
        })
        .catch(() => {
          this.$parent.$parent.$parent.pageLoading = false
        })
    },
    tab3DeleteItem(v) {
      this.$confirm('确定要删除这条记录？', '操作确认').then(() => {
        this.$parent.$parent.$parent.pageLoading = true
        this.$request(this.$api.partmap + 'delete/' + v.id, {}, 'post')
          .then((r) => {
            this.$parent.$parent.$parent.pageLoading = false
            this.$message({
              message: '操作成功',
              type: 'success',
            })
            this.tab3GetList()
          })
          .catch(() => {
            this.$parent.$parent.$parent.pageLoading = false
          })
      })
    },
    tab3Submit() {
      this.submitLoading = true
      this.$request(this.$api.partmap + 'add', this.tab3Data, 'post')
        .then((r) => {
          this.submitLoading = false
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.tab3EditFormVisible = false
          this.tab3GetList()
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
  },
}
</script>

<style lang="less" scoped></style>